<template>
	<!-- 购物车 -->
	<view class="container">
		<!-- 空白页 -->
		<view v-if="cartList.length == 0" class="empty">
			<image src="../../static/gwcymian/emptyCart.jpg" mode="aspectFit"></image>
			<view v-if="cartList.length == 0" class="empty-tips">
				空空如也
				<navigator class="navigator" v-if="cartList.length == 0" url="../home/home" open-type="switchTab">
					随便逛逛>
				</navigator>
			</view>
			<view v-else class="empty-tips">
				空空如也
				<view class="navigator" @click="navToLogin">去登陆></view>
			</view>
		</view>
		<view v-else>
			<!-- 列表 -->
			<view class="cart-list">
				<block v-for="(item, index) in cartList" :key="item.id">
					<view class="cart-item" :class="{'b-b': index!==cartList.length-1}">
						<view class="image-wrapper">
							<image :src="item.spuImg" :class="[item.loaded]"></image>
							<image :src="allChecked ? img_on : img_off" class="checkbox" style="width: 30rpx; height: 30rpx;" :class="{checked: item.checked}" @click="check('item', index)"></image>
						</view>
						<view class="item-right">
							<text class="clamp title">{{item.title}}</text>
							<text class="attr">{{item.skuTitle}}</text>
							<view>
								<text class="price">¥{{item.originalPrice/100}}</text>
								<text class="price-m">¥{{item.price/100}}</text>
							</view>
							<view class="buy-num">
								<view class="jian-btn" @tap="jianBtnTap(item,'-')" :data-index="index">-</view>
								<input type="number" :value="item.num" disabled></input>
								<view class="jia-btn" @tap="jianBtnTap(item,'+')" :data-index="index">+</view>
							</view>
						</view>
						<image src="../../static/soushang/shangcu.png" style="width: 35rpx; height: 35rpx;" @click="deleteCartItem(index)"></image>
					</view>
				</block>
			</view>
			<!-- 底部菜单栏 -->
			<view class="action-section">
				<view class="checkbox">
					<image :src="allChecked? img_on:img_off" mode="aspectFit"
					 @click="check('all')"></image>
					<view class="clear-btn" :class="{show: allChecked}" @click="clearCart">
						清空
					</view>
				</view>
				<view class="total-box">
					<text class="price">¥{{total}}</text>
					<text class="coupon">
						总共
						<text>{{all}}</text>
						件
					</text>
				</view>
				<button type="primary" class="no-border confirm-btn" @click="createOrder">去结算</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				total: 0, //总价格
				allChecked: true, //全选状态  true|false
				cartList: [],
				text1:'提示',
				oId: null,
				num: 1, 
				all: 0,
				img_on:'../../static/gwcymian/selected.png',
				img_off:'../../static/gwcymian/select.png',
			};
		},
		onLoad: function(option) {
			this.listar()
		},
		onShow: function(e) {
			this.listar()
			if (uni.getStorageSync('accessToken') == '') {
				uni.showModal({
					title: '登录提示',
					content: '您尚未登录，是否立即登录',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '../long/long'
							})
							return
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			}
		},
		methods: {
			listar() {
				uni.request({
					url: 'http://192.168.1.54:8081/m.api?_gp=cart&_mt=getCartList',
					header: {
						'accesstoken': uni.getStorageSync('accessToken')
					},
					success: (res) => {
						this.cartList = res.data.data
						this.num = res.data.data.num
					}
				})
			},
			navToLogin() {
				uni.navigateTo({
					url: '/pages/long/long'
				})
			},
			// 选中状态处理
			check(type, index) {
				console.log(type, index)
				if (type === 'item') {
					this.cartList[index].checked = !this.cartList[index].checked;
				} else {
					const checked = !this.allChecked
					const list = this.cartList;
					list.forEach(item => {
						item.checked = checked;
					})
					this.allChecked = checked;
				}
				this.calcTotal(type);
			},
			/* 点击加减 */
			jianBtnTap(item, type) {
				if (type == '+') {
					item.num++
					console.log(item.num)
				} else {
					item.num--
				}
				let that = item.num
				uni.request({
					url: 'http://192.168.1.54:8081/m.api?_gp=cart&_mt=updateCartItemNum&cartId=' + item.id + '&num=' + item.num,
					header: {
						'accesstoken': uni.getStorageSync('accessToken')
					},
					success: (res) => {
						console.log(res)
						this.calcTotal()
					}
				})
			},
			open() {
				uni.showToast({
					title: this.text1,
				})
			},
			// 删除
			deleteCartItem(index) {
				let thih = this
				uni.request({
					url: 'http://192.168.1.54:8081/m.api?_gp=cart&_mt=removeCartItem&cartId=' + this.cartList[index].id,
					header: {
						'accesstoken': uni.getStorageSync('accessToken')
					},
					success: (res) => {
						console.log(res)
						thih.listar();
						this.calcTotal()
					}
				})
			},
			// 清空
			clearCart() {
				uni.request({
					url: 'http://192.168.1.54:8081/m.api?_gp=cart&_mt=removeCartAll ',
					header: {
						'accesstoken': uni.getStorageSync('accessToken')
					},
					success: (res) => {
						uni.showModal({
							content: '清空购物车？',
							success: (e) => {
								if (e.confirm) {
									this.cartList = [];
								}
							}
						})
					}
				})
			},
			// 计算总价
			calcTotal() {
				let list = this.cartList;
				let total = 0;
				let checked = true;
				let all = 0
				list.forEach(item => {
					if (item.checked === true) {
						total += item.price / 100 * item.num;
						all += item.num
					} else if (checked === true) {
						checked = false;
					}
				})
				this.allChecked = checked;
				this.total = Number(total.toFixed(2));
				this.all = all
			},
			// 创建订单
			createOrder() {
				let list = this.cartList;
				let goodsData = [];
				list.forEach(item => {
					if (item.checked) {
						goodsData.push({
							"categoryId": item.categoryId,
							"categoryIdList": item.categoryIdList,
							"gmtCreate": item.gmtCreate,
							"gmtUpdate": item.gmtUpdate,
							"id": item.id,
							"num": item.num,
							"originalPrice": item.originalPrice,
							"price": item.price,
							"skuId": item.skuId,
							"skuTitle": item.skuTitle,
							"spuId": item.spuId,
							"spuImg": item.spuImg,
							"stock": item.stock,
							"title": item.title,
							"vipPrice": item.vipPrice,
							"checked": item.checked
						})
					}
				})
				uni.navigateTo({
					url: `/pages/buynow/buynow?data=${JSON.stringify({goodsData: goodsData})}&oprk=1`
				})
			}
		}
	}
</script>

<style scoped>
	.container {padding-bottom: 134rpx;}
	/* 空白页 */
	.container .empty {position: fixed; left: 0; top: 0; width: 100%; height: 100vh; padding-bottom: 100rpx; display: flex;justify-content: center;flex-direction: column;align-items: center;background: #fff;}
	.container .empty image {width: 240rpx;height: 160rpx;margin-bottom: 30rpx;}
	.container .empty .empty-tips {display: flex;font-size: 22rpx;color: #C0C4CC;}
	.container .empty .empty-tips .navigator {color: #fa436a;margin-left: 16upx;}

	/* 购物车列表项 */
	.cart-item {display: flex; position: relative; border-bottom: 1px solid #e5e5e5; padding: 30rpx 40rpx;}
	.cart-item .image-wrapper {width: 210rpx; height: 210rpx; flex-shrink: 0; position: relative;}
	.cart-item .image-wrapper image {width: 100%; height: 100%; border-radius: 8rpx; border: 1px solid #F5F5F5;}
	.cart-item .checkbox {position: absolute; left: -16rpx; top: -16rpx; z-index: 8; font-size: 44rpx; line-height: 1; padding: 4rpx; color: #CCCCCC; background: #fff; border-radius: 50px;}
	
	/* 加减计算器 */
	.buy-num {width: 164rpx; height: 48rpx; line-height: 48rpx; display: flex; font-size: 24rpx; text-align: center; margin-top: 20rpx;}
	.buy-num .jian-btn {width: 48rpx; height: 100%; border-left: 1rpx solid #ccc; border-bottom: 1rpx solid #ccc; border-top: 1rpx solid #ccc; border-bottom-left-radius: 6rpx; border-top-left-radius: 6rpx;}
	.buy-num .jian-btn.disabled {background-color: #f5f5f9; border-left: 1rpx solid #eee; border-bottom: 1rpx solid #eee; border-top: 1rpx solid #eee; color: #ccc;}
	.buy-num .jia-btn {width: 48rpx;height: 100%;border-right: 1rpx solid #ccc;border-bottom: 1rpx solid #ccc;border-top: 1rpx solid #ccc;border-bottom-right-radius: 6rpx;border-top-right-radius: 6rpx;}
	.buy-num .jia-btn.disabled {background-color: #f5f5f9;border-right: 1rpx solid #eee;border-bottom: 1rpx solid #eee;border-top: 1rpx solid #eee;color: #ccc;}
	.buy-num input {width: 68rpx;height: 48rpx;min-height: 48rpx;text-align: center;font-size: 24rpx;border: 1rpx solid #ccc;}
	.item-right {display: flex;flex-direction: column;flex: 1;overflow: hidden;position: relative;padding-left: 30upx;}
	.item-right .clamp {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: block;}
	.item-right .title,.item-right text {font-size: 26rpx;color: #303133;height: 40rpx;line-height: 40rpx;}
	.item-right .attr {font-size: 22rpx;color: #909399;}
	.item-right .price {text-decoration: line-through;padding-right: 20rpx;}
	.item-right .del-btn {padding: 4rpx 10rpx;font-size: 34rpx;height: 50rpx;color: #909399;}

	/* 底部栏 */
	.action-section {position: fixed; left: 30rpx; bottom: 30rpx;
		z-index: 95; display: flex; align-items: center; width: 640rpx; height: 100rpx; padding: 0 30rpx; background: rgba(255, 255, 255, .9); box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, .5); border-radius: 16rpx;}
	.action-section .checkbox {height: 52rpx; position: relative;}
	.action-section .checkbox image {width: 52rpx; height: 100%; position: relative; z-index: 5;}
	.clear-btn {position: absolute; left: 26rpx; top: 0; z-index: 4; width: 0; height: 52rpx; line-height: 52rpx;
		padding-left: 15rpx; font-size: 26rpx; color: #fff; background: #C0C4CC; border-radius: 0 50px 50px 0; opacity: 0; transition: .2s; text-align: center;}
	.clear-btn.show {opacity: 1; width: 120rpx;}
	.total-box {flex: 1; display: flex; flex-direction: column; text-align: right; padding-right: 40rpx;}
	.total-box .price {font-size: 30rpx; color: #303133;}
	.total-box .coupon {font-size: #303133; color: #909399;}
	.total-box .coupon text {color: #303133;}
	.confirm-btn {padding: 0 38rpx; margin: 0; border-radius: 100px; height: 76rpx; line-height: 76rpx; font-size: 28rpx; background: #fa436a !important; box-shadow: 1px 2px 5px rgba(217, 60, 93, 0.72);}

	/* 复选框选中状态 */
	/* .action-section .checkbox.checked,
	.cart-item .checkbox.checked {
		color: #fa436a;
	} */
</style>
